<template>
  <div class="dv-decoration-7">
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="10, 0 19, 10 10, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="2, 0 11, 10 2, 20"
      />
    </svg>
    <div class="border-box-content">
      <slot></slot>
    </div>
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="11, 0 2, 10 11, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="19, 0 10, 10 19, 20"
      />
    </svg>
  </div>
</template>

<script>
  import { cloneDeep, mergeDeep } from "../../../../utils/utils";

  export default {
    name: "DvDecoration7",
    props: {
      color: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        defaultColor: ["#1dc1f5", "#1dc1f5"],
        mergedColor: []
      };
    },
    watch: {
      color() {
        const { mergeColor } = this;
        mergeColor();
      }
    },
    methods: {
      mergeColor() {
        const { color, defaultColor } = this;
        this.mergedColor = mergeDeep(cloneDeep(defaultColor, true), color || []);
      }
    },
    mounted() {
      const { mergeColor } = this;
      mergeColor();
    }
  };
</script>

<style scoped>
  .dv-decoration-7 {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .dv-decoration-7 .border-box-content {
    position: relative;
    padding: 0 12px;
  }
</style>
